$(function () {
  //全局对象，筛选和分页用
  let q = {
    pagenum: 1, //是	int	页码值
    pagesize: 2, //是	int	每页显示多少条数据
    cate_id: '', //否	string	文章分类的 Id
    state: '', //否	string	文章的状态，可选值有：已发布、草稿
  }

  //1.初始化文章列表
  initArticleList()
  function initArticleList() {
    axios({
      method: 'get',
      url: '/my/article/list',
      params: q,
    }).then(res => {
      if (res.data.status) {
        return layer.msg(res.data.message)
      }
      //成功渲染
      let arr = []
      res.data.data.forEach(ele => {
        arr.push(`
          <tr>
            <td>${ele.title}</td>
            <td>${ele.cate_name}</td>
            <td>${dateFormat(ele.pub_date)}</td>
            <td>${ele.state}</td>
            <td>
              <button class="layui-btn layui-btn-xs">编辑</button>
              <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
                `)
      })
      //循环结束，赋值
      $('tbody').empty().html(arr.join(''))
      //分页函数
      renderPage(res.data.total)
    })
  }

  //2.初始化文章选择列表
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'get',
      url: '/my/article/cates',
    }).then(res => {
      if (res.data.status !== 0) {
        return layer.msg('res.data.message')
      }
      //渲染
      let arr = ['<option value="">请选择文章所属分类</option>']
      res.data.data.forEach(ele => {
        arr.push(`
                  <option value="${ele.Id}">${ele.name}</option>
        `)
      })
      //循环结束赋值
      let str = arr.join('')
      $('[name="cate_id"]').empty().html(str)
      form.render()
    })
  }

  //3.筛选
  $('#searchForm').on('submit', function (e) {
    e.preventDefault()
    //cate_id和state的值修改，根据form表单立的值修改
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    //重新渲染 文章列表
    initArticleList()
  })

  //4.分页
  function renderPage(total) {
    //执行一个laypage实例
    layui.laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //每页显示多少条
      curr: q.pagenum, //第几页

      //显示区域
      layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
      limits: [2, 3, 5, 10],
      //页面加载时，页面切换时会触发
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit) //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          q.pagenum = obj.curr
          q.pagesize = obj.limit
          initArticleList()
        }
      },
    })
  }
})
